<template>
  <div ref="chartRef" style="width:100%;height:600px"></div>
</template>
<script lang="ts">
  import {defineComponent, onMounted, ref, Ref, unref, watch, watchEffect} from 'vue';

  import {useECharts} from '../../hooks/web/useECharts';


  export default defineComponent({
    props: {
      dataSource: {
        type: Object,
        default: [],
      }
    },
    setup(props) {

      const chartData = ref([]);
      const chartRef = ref<HTMLDivElement | null>(null);
      const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>);

      watch(() => unref(props).dataSource, () => {
          chartData.value = unref(props).dataSource;
          loadChartDataSetOptions()
        }
      );
      watch(unref(chartData), () => {
        loadChartDataSetOptions()
      });

      function loadChartDataSetOptions() {


        setOptions({
          title: {
            text: "图表查看"
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          legend: generateLegend(),
          xAxis: generatexAxis(),
          yAxis: {
            type: 'value'
          },
          grid: {left: '1%', right: '1%', top: '10%', bottom: 0, containLabel: true},
          series: generateSeries(),
        });
      }


      function generatexAxis(): any {


        function getCatalogData(): any[] {
          let dataArray = [];

          unref(chartData).forEach(data => {
            dataArray.push(data.todayDate)
          });
          console.log(dataArray);
          return dataArray
        }

        return {
          type: 'category',
          boundaryGap: false,
          data: getCatalogData(),
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: 'rgba(226,226,226,0.5)',
            },
          },
          axisTick: {
            show: false,
          },
        }
      }

      function generateLegend(): any {
        return {
          data: ["充值金额", "arppu", "利润", "arpu"]
        }
      }

      function generateSeries(): any[] {
        let series = [];

        function getDataListByProperName(properName, name) {
          let data = [];
          unref(chartData).forEach(value => {
            data.push(value[properName])
          });
          return {
            name,
            type: 'line',
            stack: 'Total',
            data: data
          }
        }

        series.push(getDataListByProperName("totalRechargeMoney", "充值金额"));
        series.push(getDataListByProperName("arppu", "arppu"));
        series.push(getDataListByProperName("arpu", "arpu"));
        series.push(getDataListByProperName("profits", "利润"));


        return series
      }

      onMounted(() => {
        chartData.value = unref(props).dataSource;
        loadChartDataSetOptions()
      });

      return {chartRef};
    },
  });
</script>
